import React from 'react'
import { Form, Input, Select, Button, Table, Pagination } from 'antd'
import { connect } from 'react-redux'
import _ from 'lodash'
import moment from 'moment'
import { operLogFindBypageApi } from '../../api/ajax'

const FormItem = Form.Item
const Option = Select.Option

const columns = [
  {
    title: '日志ID',
    dataIndex: 'id',
    width: 280
  },
  {
    title: '操作类型',
    dataIndex: 'operType',
    render: text => {
      const type = ['新增', '修改', '删除', '其他']
      return <span>{type[text - 1]}</span>
    }
  },
  {
    title: '操作页面',
    dataIndex: 'operPage'
  },
  {
    title: '操作信息',
    dataIndex: 'operInfo'
  },
  {
    title: '操作时间',
    dataIndex: 'createDate',
    render: text => (
      <span>{text && moment(text).format('YYYY-MM-DD hh:mm:ss')}</span>
    )
  }
]

class OperationLog extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tableSource: [],
      currentPage: 1,
      pageNum: 1,
      pageSize: 5
    }
  }
  componentDidMount() {
    this.loadData()
  }
  loadData = (pageNum = 1) => {
    const { getFieldsValue } = this.props.form
    const { pageSize } = this.state
    const value = getFieldsValue()
    _.each(value, (v, k) => {
      if (_.isNil(v)) value[k] = ''
    })
    operLogFindBypageApi(_.assign({}, value, { pageNum, pageSize })).then(v => {
      const {
        list: { totalRecord, results }
      } = v
      this.setState({
        totalRecord,
        tableSource: _.isNil(results) ? [] : results
      })
    })
  }
  render() {
    const { getFieldDecorator, resetFields } = this.props.form
    const { totalRecord, pageSize, currentPage, tableSource } = this.state
    return (
      <div className="home">
        <div className="home-head">
          <Form layout="inline">
            <FormItem label="操作类型">
              {getFieldDecorator('operType')(
                <Select placeholder="请选择" style={{ width: 170 }}>
                  <Option value={1}>新增</Option>
                  <Option value={2}>修改</Option>
                  <Option value={3}>删除</Option>
                  <Option value={4}>其他</Option>
                </Select>
              )}
            </FormItem>
            <FormItem label="操作页面">
              {getFieldDecorator('operPage')(
                <Select placeholder="请选择" style={{ width: 170 }}>
                  <Option value="任务">任务</Option>
                  <Option value="源产品">源产品</Option>
                  <Option value="目标">目标</Option>
                  <Option value="项目">项目</Option>
                </Select>
              )}
            </FormItem>
            <FormItem label="关键词">
              {getFieldDecorator('operInfo')(<Input type="text" />)}
            </FormItem>
            <Button
              type="primary"
              style={{ marginRight: '10px' }}
              onClick={() => this.loadData()}
            >
              查询
            </Button>
            <Button
              onClick={() => {
                resetFields()
                this.loadData(1)
              }}
            >
              重置
            </Button>
          </Form>
        </div>
        <div>
          <Table
            dataSource={tableSource}
            scroll={{ x: 1200 }}
            columns={columns}
            rowKey={'id'}
            pagination={false}
          />
          <div className="home-body-page">
            <Pagination
              total={totalRecord}
              pageSize={pageSize}
              current={currentPage}
              onChange={pageNum => {
                this.setState({ pageNum, currentPage: pageNum })
                this.loadData(pageNum)
              }}
              showTotal={total => `共${total}条数据`}
            />
          </div>
        </div>
      </div>
    )
  }
}

export default connect(state => ({
  state
}))(Form.create()(OperationLog))
